<!DOCTYPE html>
<html>

<head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@4.2.1/dist/aframe-event-set-component.min.js"></script>
</head>

<body>





    <a-scene cursor="rayOrigin :mouse">
        <a-assets>
            <img id="testImg"
                src=""
                alt="">

            <img id="skyImg"
                src=""
                alt="">

            <a-asset-item id="model" src="https://cdn.jsdelivr.net/npm/electroluxasset/model/scene/scene.gltf"></a-asset-item>
        </a-assets>

        <!-- 关于cursor primitive交互 -->
        <a-plane material="src: #testImg; repeat:10 10" shadow="receive:true" rotation="-90 0 0" scale="100 100 100"
            position="0 0.3 -3">
        </a-plane>

        <a-sky material="src:#skyImg"></a-sky>

        <!-- 关于animation 
            运动 loop: true -->

        <a-box id="origin"  position="0 1 -5" color-toggle animation="property: position; to: 1 8 -10; dur: 2000; easing: linear; " color="tomato"></a-box>
        <a-box id="object" position="2 2 -5" color-toggle></a-box>


        <a-entity position="0 1 0">

        </a-entity>


        <!-- <a-entity position="0 1.6 0">
            <a-cursor raycaster="showLine:true"></a-cursor>            
        </a-entity> -->


        <!-- 加上 cursor-listener 才能监听到 属性 ，我服了 -->
        <!--  raycaster="showLine:true" -->
        <!-- <a-camera >
            <a-cursor></a-cursor>
        </a-camera>  -->
        <a-camera>
            <a-entity id="camera"  position="0 0 -1 " look-controls   wasd-contwrols raycaster="objects:#object" cursor-listener >
                <!-- fuse="true"  一段时间后进行光纤投射 -->
                <a-cursor id="cursor" fuse="true" fusetimeout="2000"></a-cursor>
            </a-entity>
        </a-camera>
    </a-scene>

    <script>
        AFRAME.registerComponent("color-toggle", {
            init: function () {
                let el = this.el

                this.el.setAttribute('material', {
                    color:"rgb(250,0,250)"
                  
                });



                this.toggleColor = function () {

                }
                this.el.addEventListener("fusing", (e) => {
                    // alert("click")
                    // e.target.setAttribute("material", "color:rgb(0,0,0)")
                    // document.querySelector("#camera").components.raycaster.refreshObjects()
                    // 刷新组件状态 dom.components.raycaster.refreshObjects()
                })
                this.el.addEventListener("click", (e) => {
                    alert("click")
                    e.target.setAttribute("material", "color:rgb(0,0,0)")
                    // document.querySelector("#camera").components.raycaster.refreshObjects()
                    // 刷新组件状态 dom.components.raycaster.refreshObjects()
                })
                this.el.addEventListener("mouseenter", (e) => {
                    // e.target.setAttribute("material", "color:rgb(0,0,0)")
                    // 重要: refreshObjects 可以实现只选择一个
                   
                })
            },
            remove: function () {
                // this.el.removeEventListener("click",this.toggleColor)
            }

        })
        Button.propTypes = {
            /**
             *  配置按钮的大小
             * 
             *  可选值：'small' | 'medium' | 'large'
             */
            size: PropTypes.string,
        }

        Button.defaultProps = {
            size: null,
        }
    </script>
  
</body>

</html>